<template>
	<div>

		

		<h1 class="bttt">编辑专家信息</h1>
		<!-- <div class="img"><tailoring></tailoring></div> -->
		<p class="bttt" >专家ID：{{expid}}</p>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="姓名" prop="Name"><el-input v-model="expone.expertName"></el-input></el-form-item>
			<el-form-item label="电话" prop="Phone"><el-input v-model="expone.phone"></el-input></el-form-item>
			<el-form-item label="密码" prop="Password"><el-input placeholder="请输入密码" v-model="expone.password" show-password></el-input></el-form-item>
			<el-form-item label="单位" prop="company">
				<el-select v-model="expone.company" placeholder="请选择单位">
					<el-option v-for="c in companys" :label="c" :value="c" :key="c">{{ c }}</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="状态" prop="status">
				<el-switch v-model="expone.status==1?true:false" active-color="#13ce66" inactive-color="#ff4949" @change="handleStatus(expone.status)">
				</el-switch>
			</el-form-item>

			<el-form-item label="专业领域" prop="Specialty">
				<el-select v-model="expone.specialty" placeholder="请选择领域">
					<el-option v-for="c in Specialtys" :label="c" :value="c" :key="c">{{ c }}</el-option>
				</el-select>
			</el-form-item>
<!--			<span v-if="expone.sex.equal('男')?true:false">-->
				<el-form-item label="性别" prop="sex">
				<el-radio-group v-model="expone.sex">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
<!--			</span>-->
			<el-form-item label="会员编号" prop="numberCard">
				<el-input v-model="expone.numberCard">
					<template slot="prepend">
					</template>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="UpdateExpert('ruleForm')" class="gengxin">更新</el-button>
				<el-button type="warning" @click="query()" class="chongzhi">重置</el-button>
				<el-button type="success" @click="fanhui()" class="fanhui">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import tailoring from "../myCenter/Tailoring";
	import dayjs from 'dayjs';
	export default {
		name: 'bianji',
		components: {
			tailoring,
			dayjs
		},
		data() {
			return {
				companys: ['济南一院', '济南二院', '济南三院','济南五院','济南六院','山东一院','山东二院'],
				Specialtys: ['眼科', '儿科', '妇科','外科','内科','其他'],
				expid:'000',
				expone:[],
				ruleForm: {
					Name: 'Ceshi0001',
					Sex: '男',
					Phone: '19861601001',
					Password: 'cs0001',
					// Status: expone.status.equal('1')?true:false,
					Status: true,
					Specialty:'Testzhuanyelingyu',
					Company: '',
					NumberCard: '001'
				},
				rules: {
					Name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
					Phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, { pattern: /^[1][35789]\d{9}$/, message: '请输入正确的手机号' }],
					Password: [
						{ required: true, message: '密码不能为空', trigger: 'blur' },
						// { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '长度至少为8，至少含有一个字母和一个数字' }
					],

					// Specialty: [{ type: 'array', required: true, message: '请至少选择一个专业领域', trigger: 'change' }],
					Company: [{ required: true, message: '请选择工作单位', trigger: 'change' }],
					NumberCard: [{ required: true, message: '会员编号不能为空', trigger: 'blur' }, { pattern: /^[0-9]\d{2}$/, message: '会员编号为三位数字' }]
				}
			};
		},
		mounted:function(){
			this.query();//需要触发的函数
		},
		methods: {
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleStatus(value){
				console.log(value)
				if(value==1){
					// alert("va=1--"+this.expone.status);
					this.expone.status = '0';
					this.ruleForm.Status = false;
				}else {
					// alert("va=0--"+this.expone.status);
					this.expone.status = '1';
					this.ruleForm.Status = true;
				}
				// alert(this.expone.status+this.ruleForm.Status);
			},
			fanhui(){
				this.$router.push({ path: '/mycenter/zjgl'});
			},
			query(){
				let that=this
				that.expid = localStorage.getItem('expertId');
				this.$axios.post(
						'http://localhost:7070/api/Administration/selectByIdExpert',
						// that.$qs.stringify(obj)
						this.$qs.stringify({expertId:that.expid}),
				).then(function (response) {
					console.log("------------1-------------------")
					console.log(response.data);
					// console.log(response.data[1]);
					that.expone = response.data;
					console.log("------------2-------------------")
					console.log(that.expone);
				})
			},
			UpdateExpert(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						// alert("规则验证成功！")
						let that=this
						let obj= {
							expertId:that.expid,
							headImg:that.expone.headImg,
							expertName:that.expone.expertName,
							sex:that.expone.sex,
							phone:that.expone.phone,
							password:that.expone.password,
							status:that.ruleForm.Status?'1':'0',
							// status:that.ruleForm.Status,
							// createDate:dayjs().format('YYYY-MM-DD HH:mm:ss'),
							// lastTime:dayjs().format('YYYY-MM-DD HH:mm:ss'),
							company:that.expone.company,
							specialty:that.expone.specialty,
							numberCard:that.expone.numberCard,
						}
						this.$axios.post(
								'http://localhost:7070/api/Administration/UpdateExpert',
								that.$qs.stringify(obj)
						).then(function (response) {
							// alert("返回值："+response.data)
							if(response.data){
								alert("修改成功！")
								// that.$router.push({'path':'/index/bottom'})
							}
							else alert('修改失败！')
						})
					} else {
						console.log('ERROR！ 格式错误!!');
						return false;
					}
				});
			},
		}
	};
</script>

<style  scoped="scoped">
	.demo-ruleForm {
		width: 30%;
		margin: 0 auto;
	}
	.bttt {
		width: 300px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	.img{
		width: 490px;
		margin: 0 auto;
	}
	el-input{
		width: 300px;
	}
	.gengxin{
		margin-right: 60px;
	}
	.chongzhi{
		margin-right: 60px;
	}
</style>
